<template>
	<view>
		<view>
			<view class="padding-tb-sm bg">
				<view class="tui-tabs" style="width: 100%;">
					<scroll-view id="tab-bar" scroll-with-animation class="tui-scroll-h" :scroll-x="true"
						:show-scrollbar="false">
						<view style="display: flex;width: 100%;white-space: nowrap;overflow-x: auto;">
							<view :key='index' v-for="(item, index) in list"
								style="width:30%;margin-left: 40upx;text-align: center" :id="index"
								:data-current="index" @tap="tabChange(item,index)">
								<view class="nameclore" :class="{ 'tui-tab-item-title-active': tabIndex == index }">
									{{ item.classifyName }}
								</view>
								<view class="weix" v-if="tabIndex == index"></view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="margin">
			<view class="box" v-for="(item,index) in sflist" :key="index" @click="godetail(item)">
				<image :src="item.avatar" mode="aspectFill" style="width: 120rpx;height: 120rpx;border-radius: 50%;">
				</image>
				<view class="margin-left-sm flex flex-direction justify-between" style="width: 80%;">
					<view>{{item.name}}</view>
					<view class="flex align-center justify-between margin-tb-xs">
						<view class="flex align-center flex-wrap">
							<view class="lab margin-bottom-xs" v-for="(ite,ind) in item.label" :key="ind">{{ite}}</view>
							<view class="lab margin-bottom-xs">{{item.age}}岁</view>
						</view>
						<view class="" style="color: #f9a43b;" v-if="item.distance">{{item.distance}}</view>
					</view>
					<view class="flex align-center justify-between">
						<view class="flex align-center">
							<u-rate :count="5" v-model="item.score" :disabled="true"></u-rate>
							<view>{{item.score?item.score:'0'}}分</view>
						</view>
						<view class="" style="color: #999999;">服务次数:{{item.serviceNum?item.serviceNum:'0'}}</view>
					</view>
				</view>
			</view>
			<empty v-if="sflist.length==0"></empty>
		</view>

	</view>
</template>

<script>
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				list: [],
				tabIndex: 0,
				classifyId: '',

				page: 1,
				limit: 10,
				sflist: [],
				city: '',
				count: 0
			}
		},
		onLoad() {


		},
		onShow() {
			this.city = uni.getStorageSync('city')
			this.getclassify()
			this.getsflist()
		},
		methods: {
			godetail(item) {
				uni.navigateTo({
					url: '/package/pages/shop/sfdetail?sfUserId=' + item.id
				})
			},
			// 切换菜单
			tabChange(item, index) {
				this.tabIndex = index
				this.classifyId = item.classifyId
				// this.goods = []; // 置空列表,显示加载进度条
				this.page = 1
				this.getsflist()
			},
			getclassify() {
				this.$Request.get("/app/fixedClassify/getClassifyList").then(res => {
					if (res.code == 0) {
						let skust = res.data
						let arr = []
						skust.map(item => {
							if (item.parentId != 0) {
								arr.push(item)
							}
						})
						this.list = [{
							createTime: "",
							classifyName: '师傅推荐',
							classifyId: 0,
							updateTime: "",
						}]
						this.list = [...this.list, ...arr]
					}
				});
			},
			//推荐师傅
			getsflist() {
				this.$Request.get("/app/userCertification/queryCertification", {
					page: this.page,
					limit: this.limit,
					onLine: 1,
					classify: 1,
					classifyId: this.classifyId,
					latitude: uni.getStorageSync('latitude'),
					longitude: uni.getStorageSync('longitude'),
				}).then(res => {
					if (res.code == 0) {
						let skust = res.data.list
						skust.map(item => {
							if (item.distance) {
								if (parseFloat(item.distance).toFixed(2) >= 1000) {
									item.distance = (parseFloat(item.distance).toFixed(1) / 1000).toFixed(
										1) + 'km'
								} else {
									item.distance = parseFloat(item.distance).toFixed(1) + 'm'
								}
							}
							if (item.label) {
								item.label = item.label.split(',')
							}
						})
						if (this.page == 1) {
							this.sflist = skust
						} else {
							this.sflist = [...this.sflist, ...skust]
						}
						this.count = res.data.totalCount
					}
					uni.stopPullDownRefresh();
				});
			},
		},
		onReachBottom: function() {
			if (this.count == this.sflist.length) {
				uni.showToast({
					title: '已经到底了~',
					icon: 'none'
				})
				return
			} else {
				this.page = this.page + 1;
				this.getsflist();
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getsflist();
		},
	}
</script>
<style >
	page {
		background: #f2f6f9;
	}
</style>
<style scoped lang="less">
	.bg {
		background: #FFFFFF;
	}

	.box {
		background: #FFFFFF;
		padding: 30rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.lab {
		border: 1rpx solid #f2f2f2;
		padding: 4rpx 10rpx;
		margin-right: 15rpx;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	.nameclore {
		font-weight: bold;
		font-size: 30rpx;
	}

	.tui-tab-item-title-active {
		color: #557EFD;
		font-size: 32rpx;
	}

	.weix {
		width: 60rpx;
		height: 6rpx;
		background: #557EFD;
		border-radius: 10rpx;
		margin: 5rpx auto;
	}
</style>